Convert any website to WordPress

As you all know that WordPress is the leading open source content management system (Mainly used for blog) and many prefer this due to the easy management as well as the coding is so simple. WordPress is the popular CMS around the world. Many users use this, even big companies use for managing their websites and blogs.

Today I would be showing you to convert any website to a WordPress theme. It’s simple as long as you read this tutorial properly and do as I say.

So, In this tutorial, I would be naming my theme “Tharun” and all contents of the theme would be inside a folder named “tharun“. You can change to any name of the theme as well as any name for the folder while you are going to try it out.

First of all we need to make a file named “style.css” for naming the theme as well as putting your CSS codes. Since you already have a website, you should definitely have “style.css” file, so keep that file ready with you so that you can paste it.

So here goes the “style.css” file

/*
Theme Name: Tharun (Theme Name)
Theme URI: http://www.tharunpkarun.com/ (Your website URL or your personal blog URL)
Version: 1.0
Description: (You may put the theme description or leave it blank)
Tags: (You can Put some keywords to represent your theme here or leave it blank)
*/
(Here you may paste your website’s style.css file which you already have.)

Please read the brackets first and Change the values as per your theme and remove those brackets containing information about it.

Just refer your current website and edit the div statements accordingly in all the codes that I have given below.

Now you have to create “header.php” file and put your codes. While you check your current website, You would see some codes starting and after a while you would see this line where the navigation ends. Copy those codes from beginning up to the end of navigation code and be ready for modifying it accordingly.

Now “header.php” goes like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta name=”viewport” content=”initial-scale = 1.0, user-scalable = no”>
(Here you may put your additional meta tags present in your current website, like Google Webmasters meta code)
<title>
<?php wp_title(); ?>
</title>
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico”/>
(Here you may place additional javascript tags or CSS tags, make sure you modify href URL(s) to “<?php bloginfo(‘template_directory’); ?>/thefilename” for automatically placing the theme directory URL.)
<?php wp_head(); ?>
</head>
<body>
<div id=”logo”></div>
<div id=”navigation-top”>
<ul id=”nav”>
<li <?php if ( is_home() ) { ?> class=”current_page_item”<?php } ?>>
<a href=”<?php echo get_option( ‘home’ ); ?>/”>Home</a>
</li>
<?php wp_list_pages( ‘title_li=’ ); ?>
</ul>
</div>
<div id=”clear”></div>

Again, Please read the brackets for more info and edit accordingly. In the above code, you would see title tag like wp_title() right? You can still edit it to match your title style. For example, you want the Title of the post to come first, then you would like to show the blog name after that, then it should look like this:

<?php wp_title(‘|’,true,’right’); ?>
<?php bloginfo(‘name’); ?>

Now we need to make footer file for putting codes for footer. To do this, Just simple make a file called “footer.php” and start copying your codes from the starting of footer area (Mostly it will begin with <div id=”footer”>) up to “</html>”

So “footer.php” like this, This is an example :

<div id=”footer”>
© 2012 <?php bloginfo(‘name’); ?>, All Rights Reserved. <a href=”http://www.tharunpkarun.com/privacy-policy/”>Privacy Policy</a> | <a href=”http://www.tharunpkarun.com/comment-policy”>Comment Policy</a>
</div>
<?php wp_footer(); ?>
</body>
</html>

Make sure you have placed <?php wp_footer();?> command before </body>.

Some websites have sidebar, you can directly include sidebar codes just above the footer files or just create “sidebar.php” and place the contents. Given below is the code for placing 1 sidebar with widgets supported.

<div id=”sidebar”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Sidebar’) ) : ?>
<?php endif; ?>
</div>

Let’s now create a homepage with some blog entries automatically loaded. So just create “index.php” file and enter the codes placed just below the navigation as well as just above the side of your current website. After that, If you want to display latest blog entries then use “The loop” function to output the entries. I have given it in the example below.

So here is the sample of “index.php” file.

<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”postheader”>
<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”author”><?php the_author(); ?></div><div class=”date”><?php the_time( ‘M j y’ ); ?></div>
</div><!–end post header–>
<div class=”entry clear”>
<?php the_excerpt(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!–end entry–>
<div class=”meta”>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end meta–>
</div><!–end post–>
<?php endwhile; ?>
<div class=”navigation”>
<div class=”alignleft”><?php next_posts_link( ‘Older Entries’ ); ?></div>
<div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
</div><!–end navigation–>
<?php else : ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

In the above example, Instead of using <?php the_excerpt(); ?> you can use <?php the_content(); ?> to show full post in the homepage itself!

Now we create “comments.php” for having comments and paste this code:

<?php
// Do not delete these lines
if (!empty($_SERVER[‘SCRIPT_FILENAME’]) && ‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))
die (‘Please do not load this page directly. Thanks!’);
if ( post_password_required() ) { ?>
<p class=”nocomments”>This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
?>
<!– You can start editing here. –>
<?php if ( have_comments() ) : ?>
<div class=”comments_intro”>
<p><span class=”bracket”>{</span> <?php comments_number(‘<span>0</span> comments … <a href=”#respond” rel=”nofollow”>submit first!</a>’, ‘<span>1</span> comment to read … please <a href=”#respond” rel=”nofollow”>submit second!</a>’, ‘<span>%</span> comments to read … please <a href=”#respond” rel=”nofollow”>submit one more!</a>’ );?> <span class=”bracket”>}</span></p>
</div>
<ol class=”commentlist”>
<?php wp_list_comments(‘type=comment&callback=theme_comment’); ?>
</ol>
<?php if ( get_comment_pages_count() > 1 && get_option( ‘page_comments’ ) ) : // Are there comments to navigate through? ?>
<div class=”comment-navigation”>
<div class=”alignleft”><?php previous_comments_link(‘← Older Comments’) ?></div>
<div class=”alignright”><?php next_comments_link(‘Newer Comments →’) ?></div>
<div class=”clearfix”></div>
</div>
<?php endif; // check for comment navigation ?>
<div class=”comments_intro”>
<p><span class=”bracket”>{</span> <span><?php echo count($wp_query->comments_by_type[‘pings’]); ?></span> Pingbacks/Trackbacks <span class=”bracket”>}</span></p>
</div>
<?php foreach ($comments as $comment) : ?>
<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type != ‘comment’) { ?>
<ol class=”pinglist”><li><?php comment_author_link() ?></li></ol>
<?php } ?>
<?php endforeach; ?>
<?php else : // or, if we don’t have comments:
if ( ! comments_open() ) :
?>
<div class=”comments_intro_closed”>
<p>Comments are closed!</p>
</div>
<?php endif; // end ! comments_open() ?>
<?php endif; // if you delete this the sky will fall on your head ?>
<?php comment_form(); ?>

This is the default version of comments file.

So, We have completed Header, Sidebar, Footer & Comments, Lets move on to Page Template & Single Post.

Single Post page is used to display the full article as well as comments right? So we need to create a “single.php” file and put these codes:

<?php get_header(); ?>
<div class=”content”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”post”>
<h2><?php the_title(); ?></h2>
<div class=”clearfix”>
<?php the_content(); ?>
<div class=”clearfix”></div>
<?php wp_link_pages(array(‘before’ => ‘<p><span class=”tags”>Pages:</span> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’)); ?>
<?php the_tags( ‘<p class=”small”><span class=”tags”>Tags:</span> ‘, ‘, ‘, ‘</p>’); ?>
<div class=”postmetadata”>
<small>
This entry was posted on <?php the_time(‘l, F jS, Y’) ?> at <?php the_time() ?>
and is filed under <?php the_category(‘, ‘) ?>.
You can follow any comments to this entry through the <?php post_comments_feed_link(‘RSS 2.0’); ?> feed.
<?php if ((‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)) {
// Both Comments and Pings are open ?>
You can <a href=”#respond”>leave a comment</a>, or <a href=”<?php trackback_url(); ?>” rel=”trackback”>trackback</a>.
<?php } elseif (!(‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)) {
// Only Pings are Open ?>
Responses are currently closed, but you can <a href=”<?php trackback_url(); ?> ” rel=”trackback”>trackback</a>.
<?php } elseif ((‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)) {
// Comments are open, Pings are not ?>
You can skip to the end and leave a comment. Pinging is currently not allowed.
<?php } elseif (!(‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.
<?php } edit_post_link(‘Edit this entry’,”,’.’); ?>
</small>
</div>
<?php comments_template(); ?>
<?php endwhile; else: ?>
<h2>Sorry, no posts matched your criteria.</h2>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Instead of using <h2><?php the_title(); ?></h2> if you use <h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2> It will make the title of the post linked to the post URL.

We will now make the Page template for showing page to visitors, To do this create “page.php” and enter this code:

<?php get_header(); ?>
<div class=”content”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2><?php the_title(); ?></h2>
<div class=”matter”>
<?php the_content(‘Continue reading →’); ?>
<div class=”clearfix”></div>
<?php wp_link_pages(array(‘before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’)); ?>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link(‘Edit’, ‘<p>’, ‘</p>’); ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now, If you want to show a custom 404 Error Page, you can show it by creating a file named “404.php” and enter this code:

<?php get_header(); ?>
<div class=”content”>
<div id=”error”>
<h2>Error 404 – Page not found</h2>
<p>Sorry, the page you are looking for has either been moved or removed from the website.</p>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now we need to setup search for your blog, go ahead make a file named “search.php” and insert this code:

<?php get_header(); ?>
<div id=”content”>
<div class=”search”>
<h2><?php _e(“Search Results for”); ?> ‘<?php echo wp_specialchars($s, 1); ?>'</h2>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<div class=”entry”>
<h2><a href=”<?php the_permalink() ?>” rel=”<?php _e(“bookmark”); ?>” title=”<?php _e(“Permanent Link to”); ?> <?php the_title(); ?>”><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>

<div class=”postmetadata”>
<small>
This entry was posted on <?php the_time(‘l, F jS, Y’) ?> at <?php the_time() ?>
and is filed under <?php the_category(‘, ‘) ?>.
<?php } edit_post_link(‘Edit this entry’,”,’.’); ?>
</small>
</div>
<?php endwhile; endif; ?>
</div>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now we would create a standard “functions.php” file with some usual data in it. With this functions file, You get 1 sidebar registered and can be used with widgets.

<?php
/**
* Set the content width based on the theme’s design and stylesheet.
*
* Used to set the width of images and content. Should be equal to the width the theme
* is designed for, generally via the style.css stylesheet.
*/
if ( ! isset( $content_width ) )
$content_width = 640;
// Add default posts and comments RSS feed links to head
add_theme_support( ‘automatic-feed-links’ );
if (function_exists(‘register_sidebar’))
register_sidebar(array(
‘name’ => ‘Sidebar’,
));
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘For Tag Cloud widget’,
‘before_widget’ => ‘<hr /><div class=”tagwidget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<div class=”tagwidgettitle”><h3>’,
‘after_title’ => ‘</h3></div>’,
));
function tharun_search_form( $form ) {
$form = ‘<form id=”searchform” method=”get” action=”<?php bloginfo(‘home’); ?>/” ><input type=”text” value=”<?php _e(“enter search terms”); ?>” onfocus=”if (this.value == ‘<?php _e(“enter search terms”); ?>’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘<?php _e(“enter search terms”); ?>’;}” size=”18″ maxlength=”50″ name=”s” id=”searchfield” /><input type=”submit” value=”Submit” /></form>’;
return $form;
}
add_filter( ‘get_search_form’, ‘tharun_search_form’ );
function theme_comment($comment, $args, $depth) {
$GLOBALS[‘comment’] = $comment; ?>
<li <?php comment_class(); ?> id=”li-comment-<?php comment_ID() ?>”>
<div id=”comment-<?php comment_ID(); ?>”>
<div class=”commenthead”>
<div class=”comment-author vcard”>
<?php if(function_exists(‘get_avatar’)) {
echo get_avatar( $comment, $size = ’36’ );
} ?>
<?php printf(__(‘<cite class=”fn”>%s</cite>’), get_comment_author_link()) ?>
</div>
<div class=”comment-meta commentmetadata”><a href=”<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>”><?php printf(__(‘%1$s at %2$s’), get_comment_date(), get_comment_time()) ?></a><?php edit_comment_link(__(‘(Edit)’),’ ‘,”) ?>
<?php if ($comment->comment_approved == ‘0’) : ?>
<em><?php _e(‘…awaiting moderation’) ?></em>
<br />
<?php endif; ?>
</div>
<div class=”clear”></div>
</div>
<div class=”commentbody”>
<?php comment_text() ?>
<div class=”reply”>
<?php comment_reply_link(array_merge( $args, array(‘depth’ => $depth, ‘max_depth’ => $args[‘max_depth’]))) ?>
</div>
</div>
</div>
<?php } ?>